<template>
    <div>
        <el-form-item :prop="item.name || ''" :label="item.label" v-bind="item.formItemProps || {}" ref="el-form-item">
            <div :class="textCss"><pre>{{svalue}}</pre></div>
        </el-form-item>
    </div>
</template>

<script>

import { objectAssign } from "../../utils/common";

export default {
    name: "PopoTextView",
    props: {
        value: { type : [String, Number, Boolean, Array]},
        item: {type: Object },
    },
    data() {
        return {
            mvalue: this.value,
            opt: {},
            activeLabel: "是",
            inactiveLabel: "否",
            valueSplitChar: ",",
            nullValue: "[未设置]",
            textCss: { "text-viewer-box":true, "null-value": false},
        };
    },
    computed:{
        svalue(){
            if( this.mvalue === null || this.mvalue === undefined){
                this.textCss[ "null-value"] = true;
                return this.nullValue;
            }
            
            if( Array.isArray( this.mvalue)){
                return this.mvalue.join( this.valueSplitChar || ",");
            }

            if( typeof this.mvalue == "boolean"){
                return this.mvalue ? this.activeLabel : this.inactiveLabel; 
            }

            return this.mvalue;
        },
    },
    created(){
        // console.log( "input", this);
        // var opt = objectAssign( {
        //     activeValue: this.item.activeValue !== undefined ? this.item.activeValue : true,
        //     inactiveValue: this.item.inactiveValue !== undefined ? this.item.inactiveValue : false,
        //     activeText: this.item.activeText !== undefined ? this.item.activeText : "",
        //     inactiveText: this.item.inactiveText !== undefined ? this.item.inactiveText : false,
        // }, this.item.props);

        // this.opt = opt;

        var viewProps = this.item.viewProps || {};
        this.activeLabel = viewProps.activeLabel || this.activeLabel;
        this.inactiveLabel = viewProps.inactiveLabel || this.inactiveLabel;
        this.nullValue = viewProps.nullValue || this.nullValue;
        this.valueSplitChar = this.item.valueSplitChar || ",";
    },
    methods: {}
};
</script>


<style scoped lang="scss">
::v-deep{ }

@import "../../css/view_base";

</style>
